<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>李秋池的个人履历主页</title>
    <link rel="stylesheet" href="./css重置样式/reset.css">
    <style>
        body {
            max-width: 750px;
            margin: 0 auto;
            background-color: aqua;
        }
        @media screen and (min-width:750px) {
            html {
                font-size: 75px !important;
            }
        }
        .touxiang {
            width: 3rem;
            height: 3rem;
            margin: 0 auto;
            margin-top: .6667rem;
            border-radius: 50%;
            box-shadow: .04rem .04rem .04rem black;
            overflow: hidden;
            transition: all 1s;
        }
        .touxiang img{
            width: 3rem;
            height: 3rem;
            transition: all 1s;
        }
        .yihang {
            width: 10rem;
            text-align: center;
            margin-top: .6667rem;
            color: white;
            text-shadow: .04rem .04rem .04rem black;
        }
        .dichan {
            display: flex;
            width: 10rem;
            flex-wrap: wrap;
            justify-content: space-evenly;
            overflow: hidden;
        }
        .wenben1 {
            width: 8rem;
            margin: 0 auto;
            font-size: .6rem;
            margin-top: .6667rem;
            line-height: .8rem;
            box-sizing: border-box;
        }
        .dichan img {
            margin-top: .4rem;
            width: 4rem;
            height: 4rem;
            transition: all 1s;
            border-radius: 10%;
        }
        .wenben2 {
            width: 8rem;
            margin: 0 auto;
            font-size: .6rem;
            margin-top: .6667rem;
            line-height: .8rem;
            box-sizing: border-box;
        }
        .dichan1 {
            display: flex;
            width: 10rem;
            flex-wrap: wrap;
            justify-content: space-evenly;
            overflow: hidden;
        }
        .dichan1 img {
            margin-top: .4rem;
            width: 4rem;
            height: 4rem;
            transition: all 1s;
            border-radius: 10%;
        }
        .wenben3 {
            width: 8rem;
            margin: 0 auto;
            font-size: .6rem;
            margin-top: .6667rem;
            line-height: .8rem;
            box-sizing: border-box;
        }
        .dichan2 {
            display: flex;
            width: 10rem;
            flex-wrap: wrap;
            justify-content: space-evenly;
            overflow: hidden;
        }
        .dichan2 img {
            margin-top: .4rem;
            width: 4rem;
            height: 4rem;
            transition: all 1s;
            border-radius: 10%;
        }
        .wenben4 {
            width: 8rem;
            margin: 0 auto;
            font-size: .6rem;
            margin-top: .6667rem;
            line-height: .8rem;
            box-sizing: border-box;
            margin-bottom: 2.6667rem;
        }
    </style>
    <script src="./适配/index.js"></script>
</head>
<body>
    <div class="touxiang"><img class="toutu" src="./图片/IMG_20220711_131528.jpg" alt=""></div>
    <div class="yihang" style="font-size: 1rem;">李秋池的履历主页</div>
    <div class="wenben1" style="text-align: center;color: red;">
        <p>（图片可点击放大缩小）</p>
    </div>
    <div class="wenben1">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我叫李秋池，男性，92年阳历四月份出生，户籍为江苏省徐州新沂市。我没有令人生厌的不良行为（如抽烟喝酒），也没有优雅的兴趣爱好，生活平谈无奇，所以我这个人比较俗。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2015年，我先后在上海中原、德祐房产中介做过，一共做了两年，主要工作内容就是通过派单、驻守、电话和网络发布房源等渠道，寻找有购房意向的客户，为之寻找和匹配相应的房源，促成交易。下图是当时做房产中介时的保留照。</p>
    </div>
    <div class="dichan">
        <img class="tutu" src="./图片/在上海1.jpg" alt="">
        <img class="tutu" src="./图片/在上海2.jpg" alt="">
        <img class="tutu" src="./图片/在上海3.jpg" alt="">
        <img class="tutu" src="./图片/在上海4.jpg" alt="">
    </div>
    <div class="wenben2">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2017年到2019年，我在上海敬捷塑胶制品有限公司做真空窗的质检员，主要工作内容是检查真空窗内的百叶帘、真空窗框架和玻璃的瑕疵是否超出出口标准的范围。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在上海工作期间，有个志同道合的高中同学想找我合伙做点生意，后来我们一拍即合，打算开一间卖茶饮又卖茶叶还卖茶杯等生态链完善的饮品店。之前我就有饮品行业的经验，为了确保万无一失，我不仅到各处商业地段了解商铺价格，还进一步学习饮品知识，甚至连相关的营销海报设计软件如PS、AI和PR都有进一步学习。如下图，记录了曾经的种种。</p>
    </div>
    <div class="dichan1">
        <img class="tutu1" src="./图片/11品尝茶.jpg" alt="">
        <img class="tutu1" src="./图片/11品茶.jpg" alt="">
        <img class="tutu1" src="./图片/11咖啡一.jpg" alt="">
        <img class="tutu1" src="./图片/11咖啡2.jpg" alt="">
        <img class="tutu1" src="./图片/11阅读茶类文献.jpg" alt="">
        <img class="tutu1" src="./图片/11自学ps.jpg" alt="">
    </div>
    <div class="wenben3">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海寸土寸金，我们完全承担不起上海商铺的租金。最终在2019年末，我从上海回了家，决定先开一间销售组合茶的商店，以电商为主，从阿里巴巴找代工厂生产我们自有的产品加以销售，一旦小有名气，就可以开生态链完备的饮品店。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可当我租了商铺，购置了所有器具，向大部分厂家交了产品代工费之后，我的合伙人却掉链子了，以家里人买房为由，不出资。这对于当时的我来说，是当头一棒，完全打乱了计划，毕竟我把个人资金流全部投入到置办店铺和生产产品上了。这也是我初次创业走向灭亡的主要原因，因为我没有余下一点的推广费用。即使当初为了挤出推广成本，品牌logo设计、预包装调味茶产品包装、视频宣传制作和各大电商平台的详情页都是我个人使用PS、AI和PR制作的，但也没能挽回败局。下图是我曾经做的部分产品。</p>
    </div>
    <div class="dichan2">
        <img class="tutu2" src="./图片/商标.jpg" alt="">
        <img class="tutu2" src="./图片/产品菊花一.jpg" alt="">
        <img class="tutu2" src="./图片/产品乌龙二.jpg" alt="">
        <img class="tutu2" src="./图片/产品三.jpg" alt="">
        <img class="tutu2" src="./图片/详情页.jpg" alt="">
    </div>
    <div class="wenben4">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是我为了练习所学的html5、css3和javascript而写的个人履历小页面。</p>
    </div>
    <script>
        var touxiang = document.querySelector('.touxiang');
        var toutu = document.querySelector('.toutu');
        var tutus = document.querySelectorAll('.tutu');
        var tutu1s = document.querySelectorAll('.tutu1');
        var tutu2s = document.querySelectorAll('.tutu2');
        var diyi = 0;
        var dier = 0;
        var disan = 0;
        var disi = 0;
        toutu.addEventListener('click',function() {
            if(diyi == 0) {
                touxiang.style.borderRadius = 0;
                touxiang.style.width = '10rem';
                touxiang.style.height = '10rem';
                touxiang.style.boxShadow = '0 0 0 black';
                this.style.width = '10rem';
                this.style.height = '10rem';
                diyi = 1;
            } else if (diyi == 1) {
                touxiang.style.borderRadius = '50\%';
                touxiang.style.width = '3rem';
                touxiang.style.height = '3rem';
                touxiang.style.boxShadow = '.04rem .04rem .04rem black';
                this.style.width = '3rem';
                this.style.height = '3rem';
                diyi = 0;
            }
        });
        for(let i=0;i<tutus.length;i++) {
            tutus[i].addEventListener('click',function() {
                if(dier == 0) {
                    for(let j=0;j<tutus.length;j++) {
                    tutus[j].style.display = 'none';
                    }
                    tutus[i].style.display = 'block';
                    tutus[i].style.width = '10rem';
                    tutus[i].style.height = '10rem';
                    tutus[i].style.borderRadius = 0;
                    dier = 1;
                } else if(dier == 1) {
                    for(let j=0;j<tutus.length;j++) {
                    tutus[j].style.display = 'block';
                    }
                    tutus[i].style.width = '4rem';
                    tutus[i].style.height = '4rem';
                    tutus[i].style.borderRadius = "10\%";
                    dier = 0;
                }
            })
        };
        for(let i=0;i<tutu1s.length;i++) {
            tutu1s[i].addEventListener('click',function() {
                if(disan == 0) {
                    for(let j=0;j<tutu1s.length;j++) {
                    tutu1s[j].style.display = 'none';
                    }
                    tutu1s[i].style.display = 'block';
                    tutu1s[i].style.width = '10rem';
                    tutu1s[i].style.height = '10rem';
                    tutu1s[i].style.borderRadius = 0;
                    disan = 1;
                } else if(disan == 1) {
                    for(let j=0;j<tutu1s.length;j++) {
                    tutu1s[j].style.display = 'block';
                    }
                    tutu1s[i].style.width = '4rem';
                    tutu1s[i].style.height = '4rem';
                    tutu1s[i].style.borderRadius = "10\%";
                    disan = 0;
                }
            })
        };
        for(let i=0;i<tutu2s.length;i++) {
            tutu2s[i].addEventListener('click',function() {
                if(disi == 0) {
                    for(let j=0;j<tutu2s.length;j++) {
                    tutu2s[j].style.display = 'none';
                    }
                    tutu2s[i].style.display = 'block';
                    tutu2s[i].style.width = '10rem';
                    tutu2s[i].style.height = '10rem';
                    tutu2s[i].style.borderRadius = 0;
                    disi = 1;
                } else if(disi == 1) {
                    for(let j=0;j<tutu2s.length;j++) {
                    tutu2s[j].style.display = 'block';
                    }
                    tutu2s[i].style.width = '4rem';
                    tutu2s[i].style.height = '4rem';
                    tutu2s[i].style.borderRadius = "10\%";
                    disi = 0;
                }
            })
        };
    </script>
</body>
</html>